import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { useAppSelector } from "@/hooks/useRedux";
import { themes } from "@/theme/themeConfig";

// 定义产品类型
interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  inStock: boolean;
}

const Skin: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);
  const currentTheme = useAppSelector((state) => state.theme.currentTheme);

  // 示例产品数据
  const products: Product[] = [
    {
      id: 1,
      name: "Laptop",
      category: "Electronics",
      price: 999,
      inStock: true,
    },
    { id: 2, name: "Mouse", category: "Electronics", price: 25, inStock: true },
    { id: 3, name: "Shirt", category: "Clothing", price: 30, inStock: false },
    { id: 4, name: "Pants", category: "Clothing", price: 50, inStock: true },
    {
      id: 5,
      name: "Headphones",
      category: "Electronics",
      price: 150,
      inStock: true,
    },
  ];

  // 处理图表初始化和主题更新
  useEffect(() => {
    if (!chartRef.current) return;

    // 初始化图表实例
    const chart = echarts.init(chartRef.current);

    // 按类别汇总产品价格
    const categoryPrices = products.reduce((acc, product) => {
      if (!acc[product.category]) {
        acc[product.category] = 0;
      }
      acc[product.category] += product.price;
      return acc;
    }, {} as Record<string, number>);

    // 准备图表数据
    const categories = Object.keys(categoryPrices);
    const prices = Object.values(categoryPrices);

    // 获取当前主题颜色配置
    const themeConfig = themes[currentTheme];

    // 设置图表配置
    const option = {
      backgroundColor: themeConfig.colorBgContainer,
      title: {
        text: "Product Prices by Category",
        textStyle: {
          color: themeConfig.colorText,
        },
      },
      xAxis: {
        type: "category",
        data: categories,
        axisLine: {
          lineStyle: {
            color: themeConfig.colorBorder,
          },
        },
        axisLabel: {
          color: themeConfig.colorText,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: themeConfig.colorBorder,
          },
        },
        axisLabel: {
          color: themeConfig.colorText,
        },
      },
      series: [
        {
          data: prices,
          type: "bar",
          itemStyle: {
            color: themeConfig.colorPrimary,
          },
        },
      ],
    };

    // 设置图表配置
    chart.setOption(option);

    // 响应窗口大小变化
    const handleResize = () => chart.resize();
    window.addEventListener("resize", handleResize);

    // 清理函数
    return () => {
      window.removeEventListener("resize", handleResize);
      chart.dispose();
    };
  }, [products, currentTheme]); // 依赖产品数据和当前主题

  return (
    <div className="product-stats">
      <h2>Product Statistics</h2>
      {/* 柱状图容器 */}
      <div
        ref={chartRef}
        className="chart-container"
        style={{ width: "100%", height: "400px", marginTop: "20px" }}
      ></div>
    </div>
  );
};

export default Skin;
